<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Introduction to Ruby GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Ruby, Introduction, Linux">
<meta name="description" content="This chapter is an introduction to Ruby GTK.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Ruby GTK</h1>

<p>
In this part of the Ruby GTK programming tutorial, we will introduce the GTK library and
create our first programs using the Ruby programming language.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the GTK and Ruby. Images for the Nibbles game
can be downloaded <a href="/img/gui/rubygtk/images.zip">here</a>.
</p>

<h2>About</h2>

<p>
GTK is one of the leading toolkits for creating graphical user interfaces.
Ruby is a popular scripting language. 
</p>


<h2>Simple example</h2>

<p>
In the first example, we create a simple window. The window is
centered on the screen. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program centers a window on 
# the screen
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: April 2009

require 'gtk2'

class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "Center"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
This example shows a 250x200 px window in the centre of the screen.
</p>

<pre class="explanation">
require 'gtk2'
</pre>

<p>
The <code>require</code> keyword imports necessery types that we will use
in the application.
</p>

<pre class="explanation">
class RubyApp &lt; Gtk::Window
</pre>

<p>
The example inherits from a <code>Window</code>. 
The Window is a toplevel container. 
</p>

<pre class="explanation">
set_title "Center"
</pre>

<p>
We set a title for the window. 
</p>

<pre class="explanation">
signal_connect "destroy" do 
    Gtk.main_quit 
end
</pre>

<p>
The <code>destroy</code> event is triggered, when we click on the close button in the titlebar.
Or press Alt + F4. The method <code>main_quit</code> quits the application for good.
</p>

<pre class="explanation">
set_default_size 250, 200
</pre>

<p>
We set a default size for the application window. 
</p>

<pre class="explanation">
set_window_position Gtk::Window::POS_CENTER
</pre>

<p>
This line centers the window on the screen. 
</p>

<pre class="explanation">
 show
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>


<pre class="explanation">
Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
These three lines set up the application. 
</p>


<h2>Creating a Tooltip</h2>

<p>
The second example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This code shows a tooltip on 
# a window and a button
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'

class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title  "Tooltips"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        fixed = Gtk::Fixed.new
        add fixed
       
        button = Gtk::Button.new "Button"
        button.set_size_request 80, 35      
        button.set_tooltip_text "Button widget"
  
        fixed.put button, 50, 50       

        set_tooltip_text "Window widget"
        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
        
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
button.set_tooltip_text "Button widget"
</pre>

<p>
We set a tooltip with the <code>set_tooltip_text</code> method.
</p>

<img src="/img/gui/rubygtk/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates. 
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'

class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title  "Quit button"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui
        
        show_all
    end
    
    def init_ui
    
        fixed = Gtk::Fixed.new
        add fixed
       
        button = Gtk::Button.new "Quit"
        button.set_size_request 80, 35      
        button.signal_connect "clicked" do 
            Gtk.main_quit 
        end
  
        fixed.put button, 50, 50       

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
We use a <code>Button</code> widget. This is a very common widget.
It shows a text label, image or both. 
</p>

<pre class="explanation">
init_ui
</pre>

<p>
We delegate the creation of the user interface to the <code>init_ui</code> method.
</p>

<pre class="explanation">
show_all
</pre>

<p>
We have two options. Either to call <code>show</code> on all widgets, or to call
<code>show_all</code>, which shows the container and all its children. 
</p>

<pre class="explanation">
button = Gtk::Button.new "Quit"
</pre>

<p>
Here we create a button widget. 
</p>

<pre class="explanation">
button.set_size_request 80, 35 
</pre>

<p>
We set a size for a button.
</p>

<pre class="explanation">
button.signal_connect "clicked" do 
    Gtk.main_quit 
end
</pre>

<p>
We plug the <code>main_quit</code> method to the
button <code>clicked</code> event.
</p>

<pre class="explanation">
fixed.put button, 50, 50 
</pre>

<p>
We put the quit button into the fixed container at x=50, y=50.
</p>

<img src="/img/gui/rubygtk/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<p>
This section was an introduction to the GTK library with the Ruby language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 27, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

